<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg filter-options-pop" role="document"> <div class="modal-content"> <div class="modal-body p-0"> <div class="row m-0 filter-options-main"> <div class="col-4 p-0 filter-options-pop-left border-right"> <div class="filter-options-pop-left-header">Filter Options:</div> <ul class="filter-options-nav nav nav-tabs" role="tablist"> <li class="filter-options-nav-nav-item"> <a class="filternav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Degree of Classification</a> </li> <li class="filter-options-nav-nav-title mt-3">Primary Categories: 4</li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Process <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Function <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Business <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Geography <span class="filternav-link-b">3</span> </a> </li> <li class="filter-options-nav-nav-title mt-4">Secondary Categories: 2</li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Executive Responsible <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Group Leader Gender <span class="filternav-link-b">3</span></a> </li> </ul> </div> <div class="col-8 p-0 filter-options-pop-right"> <div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="filter-options-pop-right-header">Degree of Classification</div> <div class="filter-options-pop-right-body"> <div class="filter-options-card"> <div class="filter-options-card-header" id="headingOne"> <a data-toggle="collapse" href="#collapseExampledd" role="button" aria-expanded="false" aria-controls="collapseExampledd"> Groups </a> </div> <div class="collapse show" id="collapseExampledd"> <div class="filter-options-card-body dc-groups"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">All groups</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Not fully classified groups only</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio3">Fully classified groups only</label> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="filter-options-pop-right-header">Geography:</div> <div class="filter-options-pop-right-body"> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">United States of America [3] </label> </div> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"></a> </div> <div class="collapse show" id="collapseExample"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Canada [10] </label> </div> <a data-toggle="collapse" href="#sss" class="collapsed" role="button" aria-expanded="false" aria-controls="sss"></a> </div> <div class="collapse" id="sss"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Europe [5] </label> </div> <a data-toggle="collapse" href="#ss" class="collapsed" role="button" aria-expanded="false" aria-controls="ss"></a> </div> <div class="collapse" id="ss"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">India [5] </label> </div> <a data-toggle="collapse" href="#collapseExamples" class="collapsed" role="button" aria-expanded="false" aria-controls="collapseExamples"></a> </div> <div class="collapse" id="collapseExamples"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Clear all</button> <button type="button" class="btn btn-primary">Apply</button> </div> </div> </div> </div> </div> </div>

.filter-options-pop .modal-content { border-radius: 8px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: none; background-color: #fff; overflow: hidden; } .filter-options-pop .modal-footer .btn{ width: 86px; height: 29px; border-radius: 6px; font-size: 14px; font-weight: normal; padding: 0px; } .filter-options-pop .modal-footer .btn-primary{ background-color: #0baec8 !important; border-color: #0baec8 !important; } .filter-options-pop .modal-footer .btn-outline-primary{ color: #0baec8 !important; border-color: #0baec8 !important; } .filter-options-pop .modal-footer .btn-outline-primary:hover, .filter-options-pop .modal-footer .btn-outline-primary:focus{ color: #ffffff !important; border-color: #0baec8 !important; background-color: #0baec8 !important; } .filter-options-nav{ border: none; } .filter-options-pop-left{ min-height: 407px; } .filter-options-pop-right-header { padding: 8.5px 15.5px 8.5px 15.5px; background-color: #f6f6f6; font-size: 12px; font-weight: bold; color: #706e7b; } .filter-options-pop-right-body { padding: 9.5px 14px 9.5px 9.5px; } .filter-options-card-header { display: flex; align-items: center; } .filter-options-card{ padding: 13.5px 12px 13.5px 12px; border-radius: 4px; background-color: #f6f6f6; margin-bottom: 9.5px; } .filter-options-card-header a { font-size: 12px; font-weight: normal; letter-spacing: 0.26px; color: #000; width: 100%; text-decoration: none !important; } .filter-options-pop-left-header { border-bottom: 1px solid #4daeca; font-size: 12px; color: #706e7b; padding: 8.5px 15.5px 8.5px 20.5px; font-weight: bold; margin-bottom: 9.5px; } .filter-options-nav li { width: 100%; padding: 1px; } .filternav-link{ font-size: 12px; font-weight: normal; letter-spacing: 0.26px; text-align: left; color: #706e7b !important; padding: 7px 12px; border-radius: 4px; border: solid 1px #ffffff; background-color: #ffffff; width: 100%; display: flex; align-items: center; text-decoration: none !important; } .filternav-link.active .filternav-link-b{ display: block; } .filternav-link-b { width: 15px; height: 15px; background: #55cded; border: 1px solid #589ab2; color: #f6f6f6; font-size: 9px; display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-left: auto; text-align: center; display: none; } .filternav-link:hover, .filternav-link.active{ color: #706e7b !important; border: solid 1px #899497; background-color: #dffafe; } .filter-options-nav-nav-title { margin-left: 8px; margin-bottom: 5px; margin-right: 8px; font-size: 10px; font-weight: bold; letter-spacing: 0.2px; text-align: left; color: #706e7b; width: 100%; } .filter-options-pop .border-bottom { border-bottom: 1px solid #f9f9f9!important; } .filter-options-card-body { padding-top: 13px; } .dc-groups label { color: #706e7b; font-size: 12px; line-height: 24px; } .dc-groups .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #00b0cd; background-color: #00b0cd; } .dc-groups .custom-control-label::before { background-color: #f6f6f6; border: #707070 solid 1px; } .geography-tabb .custom-control-label { font-size: 12px; font-weight: normal; letter-spacing: 0.26px; color: #000; width: 100%; text-decoration: none !important; white-space: nowrap; } .geography-tabb .custom-control-label::before { top: 0rem; left: -1.5rem; width: 16px; height: 16px; background-color: transparent; border: #706e7a solid 1px; } .geography-tabb .custom-checkbox .custom-control-label::before { border-radius: 3px; } .geography-tabb .custom-control-label::after { top: 0rem; left: -1.5rem; width: 16px; height: 16px; } .geography-tabb .custom-control { min-height: auto; line-height: 17px; } .geography-tabb .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #00b0cd; background-color: #00b0cd; } .geography-tabb .filter-options-card-body .custom-checkbox { border: solid 0.3px rgb(0 176 205 / 30%); height: 33px; background: #fff; border-radius: 4px; padding: 7px 7px 7px 31px; } .geography-tabb .filter-options-card-body .custom-control-label { color: #00b0cd; } .geography-tabb .filter-options-card-body .row { margin: 0 0 0 18px; } .filter-options-card-header a:before { font-family: 'fontawesome'; content: "\f077"; float: right; transition: all 0.5s; color: #9e9e9e; } .filter-options-card-header a.collapsed:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }